<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <img class="indexBg" src="../../public/static/img/indexBg.jpg">
    <div class="desc textC">
      <div>欢迎来到</div>
      <div class="bold">{{tableInfo.shopName}}</div>
    </div>
    <Table :tableinfo="tableInfo" v-if="disBtn" />

  </div>
</template>

<script>
// @ is an alias to /src
import Table from '@/components/table/index'
import {GetDinnerTableInfo} from "@/api/order"
import { Toast } from 'vant';
export default {
  name: 'Home',
  components: {
    Table
  },
  data () {
    return {
      tableId: '',
      tableInfo:{},
      disBtn: true
    }
  },
  created(){
    if(this.$route.query.tableId){
      this.tableId = this.$route.query.tableId
      localStorage.setItem('tableId',this.tableId)
      this.getDinnerTableInfo()
    }else{
      this.disBtn = false
      Toast('没有餐台信息，请重新扫码')
    }
  },
  methods: {
    async getDinnerTableInfo(){
      let Id = this.tableId
      let { returnData = false } = await GetDinnerTableInfo({Id})
      if(returnData == false) return
      //console.log(returnData)
      this.tableInfo = returnData
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    position: relative;
    overflow: hidden;
      width: 100%;
      height: 100vh;
    .desc{
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.25rem;
      line-height: 2;
      color: #fff;
    }
    .indexBg{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
</style>